<template>
  <div class="list">
    <div>
      <div class="infos">
      <div class="classAdd">课时汇总</div>  
      <div class="classInfos">
        <el-form :inline="true" :model="formInline">
          <el-form-item class="classInfoss">
            <el-select
              v-model="formInline.region"
              placeholder="请选择"
              size="mini"
              :popper-append-to-body="false"
            >
              <div :model="classInfoss" v-for="item in classInfoss">
                <el-option :label="item.name" :value="item.id"></el-option>
              </div>
            </el-select>
          </el-form-item>
        </el-form>
        <div><input type="text" placeholder="请输入学员姓名" /></div>
        <div class="searchs">
          <i class="el-icon-search"></i>
        </div>
      </div>
      <div class="totala">
        <div :v-model="monthCounts">
          总排课时：<span style="color: red">{{monthCounts}}</span
          >节
        </div>
        <div :model="students">
          总学生数：<span style="color: red">{{students}}</span
          >个
        </div>
        <div :model="monthWeiShang">未结课：<span style="color: red">{{monthWeiShang}}</span>节</div>
        <div :model="monthYiJie">已结课：<span style="color: red">{{monthYiJie}}</span>节</div>
      </div>
    </div>  
     <div>
      <div  class="dataInfo">
        <el-calendar v-model="value"> </el-calendar>
      </div>
    </div> 
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: new Date(),
      //  首页搜索
      classInfoss: "",
      // 总排课时
      monthCounts : [],
      // 总学生数
      students : [],
      // 未结课
      monthWeiShang : [],
      // 已结课
      monthYiJie : [], 
      // 课程下拉
      formInline: {
        user: "",
        region: "",
      },
    };
  },

  mounted() {},
  created() {
    // 班级搜索下拉
    this.classInfos();
    // 课时汇总
    this.classZinfo();
  },
  methods: {
    // 班级搜索下拉
    async classInfos() {
      const token = window.sessionStorage.getItem("token");
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/classes/list",
        { headers: { token } }
      );
      this.classInfoss = res.data.list;
    },

      // 课时汇总
    async classZinfo() {
      const token = window.sessionStorage.getItem("token");
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/coursetables/search",
        { headers: { token } }
      );
      this.monthCounts = res.data.MonthCounts.monthCounts
      this.students = res.data.courseCounts.students
      this.monthWeiShang = res.data.MonthCounts.monthWeiShang
      this.monthYiJie = res.data.MonthCounts.monthYiJie
    },
  },
};
</script>

<style scoped>
 
.infos {
  display: flex;
  height: 8%;
  justify-content: center;
  align-items: center;
}
.classAdd {
  width: 10%;
  height: 100%;
  background-color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 55px;
  padding-left: 1%;
}
.classInfos {
  margin-left: 2%;
  width: 30%;
  height: 30px;
  display: flex;
  line-height: 30px;
  border: 1px solid #ccc;
  background-color: #fff;
}
.classInfos input:nth-child(1) {
  margin-left: 5px;
}
.classInfos div:nth-child(2) {
  line-height: 28px;
}
.totala {
  display: flex;
  margin-left: 35%;
  width: 40%;
  justify-content: space-between;
  line-height: 30px;
  margin-right: 1%;
  border-bottom: 1px solid rgb(138, 203, 223);
  height: 50%;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
}
.searchs {
  width: 30px;
  height: 30px;
  font-size: 20px;
  cursor: pointer;
}
.classInfoss {
  margin-top: -5px;
}
.dataInfo{
  width: 100%;
}
</style>
<style>
  .el-calendar__header{
   justify-content: center;
   position: relative;
}
.el-calendar__title{
  position: absolute;
  left: 2.5%;
}
.list{
  /* width: 1560px */
  width: 18%;
}
</style>